<template>
  <!-- 个人中心 -->
  <div>
    <!-- 头部导航 -->
    <div class="box">
      <div class="header">
        <div>
          <van-icon
            name="arrow-left"
            @click="$router.go(-1)"
            size="0.4865rem"
          />
        </div>
        <div class="header-img">
          <div style="font-size: 0.4324rem">个人中心</div>
        </div>
        <div>
          <van-icon name="zhankai" class-prefix="icon" size="0.4865rem" />
        </div>
      </div>
    </div>
    <!-- 头部 -->
    <div class="container">
      <div class="bg">
        <img
          width="100%"
          height="135"
          src="../../assets/img/backgroundv3.png"
        />
      </div>
      <div class="denglu">
        <p>Hi,欢迎来到订花乐！</p>
        <van-button
          round
          v-show="showLoginButton"
          @click="$router.push('/login')"
          >登陆/注册</van-button
        >
        <div class="name" v-show="!showLoginButton">
          <span class="name-"> {{ name }}</span>
          <br />
          <van-button round @click="exitLogin">退出登陆</van-button>
        </div>
      </div>
      <!-- 主体 -->
      <div class="orderbox">
        <div class="myorder">
          <div @click="$router.push('/orderCreate')">我的订单</div>
          <div @click="$router.push('/orderCreate')">全部订单></div>
        </div>
        <div class="order-list">
          <div>
            <van-icon name="paid" size="0.5676rem" />
            <div>待付款</div>
          </div>
          <div>
            <van-icon name="logistics" size="0.5676rem" />
            <div>派送中</div>
          </div>
          <div>
            <van-icon name="records" size="0.5676rem" />
            <div>待评价</div>
          </div>
          <div>
            <van-icon name="gift-card-o" size="0.5676rem" />
            <div>已完成</div>
          </div>
        </div>
      </div>
      <div class="nextbox">
        <div class="nextbox-list">
          <div>
            <!-- 优惠券单元格 -->
            <van-coupon-cell
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
              v-model="showList"
              round
              position="bottom"
              style="height: 90%; padding-top: 4px"
            >
              <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                @change="onChange"
                @exchange="onExchange"
              />
            </van-popup>
          </div>
        </div>
        <div class="nextbox-list" @click="clickaddress">
          <div>
            <van-icon
              name="shouhuodizhi"
              size="0.5676rem"
              class-prefix="icon"
            ></van-icon>
            <span>收货地址</span>
          </div>
          <van-icon name="arrow" class="icons" />
        </div>
        <div class="nextbox-list">
          <div>
            <van-icon
              name="shezhi"
              size="0.5676rem"
              class-prefix="icon"
            ></van-icon>
            <span>设置</span>
          </div>
          <van-icon name="arrow" class="icons" />
        </div>
      </div>
    </div>
    <tabbar />
    <message />
  </div>
</template>

<script>
import Message from '../../components/Message.vue'
import Tabbar from '../../components/Tabbar.vue'
import { Dialog } from 'vant'
import { getToken } from '../../utils/index'

export default {
  data () {
    return {
      name: '',
      showList: false,
      sumloading: false,
      sumdisabled: false,
      couponcode: '',
      value: 1,
      goodsprice: 499,
      totalprice: 0,
      orderdesc: '',
      chosenCoupon: -1,
      coupons: [
        {
          id: 1, // 优惠券id
          discount: 0, // 折扣券 折值 整数 为0不显示折
          denominations: 500, // 优惠券金额 单位分
          originCondition: 500000000, // 满减规则金额 单位分 为0显示无门槛
          value: 500, // 折扣券优惠金额，单位分
          name: '兰博基尼优惠券', // 优惠券名称
          description: '特大优惠，兰5券限时大放送', // 描述信息
          reason: '', // 不可用原因，优惠券不可用时展示
          startAt: 1489104000, // 卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 // 卡失效日期 (时间戳, 单位秒)
        },
        {
          id: 3, // 优惠券id
          discount: 0, // 折扣券 折值 整数 为0不显示折
          denominations: 50, // 优惠券金额 单位分
          originCondition: 500000000, // 满减规则金额 单位分 为0显示无门槛
          value: 50, // 折扣券优惠金额，单位分
          name: '阿斯顿马丁优惠券', // 优惠券名称
          description: '马丁限时大放送', // 描述信息
          reason: '', // 不可用原因，优惠券不可用时展示
          startAt: 1489104000, // 卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 // 卡失效日期 (时间戳, 单位秒)
        },
        {
          id: 2, // 优惠券id
          discount: 0, // 折扣券 折值 整数 为0不显示折
          denominations: 5000, // 优惠券金额 单位分
          originCondition: 5000, // 满减规则金额 单位分 为0显示无门槛
          value: 5000, // 折扣券优惠金额，单位分
          name: '蓝天计划优惠券', // 优惠券名称
          description: '', // 描述信息
          reason: '', // 不可用原因，优惠券不可用时展示
          startAt: 1489104000, // 卡有效开始时间 (时间戳, 单位秒)
          endAt: 1514592000 // 卡失效日期 (时间戳, 单位秒)
        }
      ]
    }
  },
  created () {
    this.getLogin()
  },
  methods: {
    /* 优惠券 */
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
    },
    onExchange (code) {
      this.coupons.push(this.coupons)
    },
    /* 优惠券 */

    // 点击去地址
    clickaddress () {
      this.$router.push('/contactLists')
    },
    // 退出登陆
    exitLogin () {
      Dialog.confirm({
        title: '提示',
        message: '您是否确认退出'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('vuex')
        this.$router.go(0)
      })
    },
    // 判断登录状态
    getLogin () {
      // 登陆了
      if (getToken()) {
        this.name = localStorage.getItem('name')
        this.showLoginButton = false
      } else {
        this.showLoginButton = true
      }
    }
  },
  components: { Tabbar, Message }
}
</script>

<style lang="scss" scoped>
.van-cell__value {
  margin-right: 2.4324rem;
  -webkit-flex: none;
  flex: none;
  font-size: 0.5946rem;
  text-align: center;
}
.van-cell__title {
  transform: translateX(-0.4324rem);
  font-size: 0.5946rem;
  color: rgb(59, 5, 5);
}
.box {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  .header {
    margin: 0 auto;
    height: 1.5rem;
    position: fixed;
    display: flex;
    width: 92%;
    background-color: #fff;
    justify-content: center;
    align-items: center;

    .header-img {
      flex-flow: 1;
      display: flex;
      justify-content: center;
      width: 100%;
    }
  }
}
.container {
  padding-top: 1.5rem;
  width: 100%;
  position: relative;
  .denglu {
    position: absolute;
    top: 0rem;
    left: 0;
    width: 100%;
    height: 5.8125rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .name {
      font-size: 0.5rem;
      color: rgba(122, 78, 243, 0.5);
      text-align: center;
      .name- {
        display: inline-block;
        margin: 0 auto 0.2rem;
      }
    }
    p {
      font-size: 0.5rem;
      margin: 0.375rem auto;
      color: #fff;
    }
  }
  .orderbox {
    font-size: 0.5rem;
    height: 3.3514rem;
    margin: 0.1622rem;
    padding: 0.4324rem;
    background-color: #fff;
    position: absolute;
    top: 4.4595rem;
    width: 88%;
    border-radius: 0.2703rem;
    display: flex;
    flex-direction: column;
    .myorder {
      color: #555;
      display: flex;
      font-size: 0.4054rem;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.4324rem;
      border-bottom: 0.027rem solid #e9ecf0;
    }
    .order-list {
      display: flex;
      flex: 1;
      justify-content: space-around;
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .nextbox {
    font-size: 0.5rem;
    height: 3.3514rem;
    margin: 0.1622rem;
    padding: 0.4324rem;
    background-color: #fff;
    position: absolute;
    top: 8.8649rem;
    width: 88%;
    border-radius: 0.2703rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .nextbox-list {
      color: #555;
      display: flex;
      padding: 0.2162rem;
      justify-content: space-between;
      border-bottom: 0.027rem solid #e9ecf0;
      span {
        margin-left: 0.2162rem;
      }
    }
  }
}
</style>
